<template>
  <div>
    <div :class="'state ' + (data.online ? 'online' : 'offline')">
      {{ data.online ? "ONLINE" : "OFFLINE" }}
    </div>
    <div class="device">
      <div class="content" @click="showDetail(data.deviceId)">
        <img
          :src="
            data.picUrl ||
            'http://iotkit-img.oss-cn-shenzhen.aliyuncs.com/product/N523nWsCiG3CAn6X/cover.jpg?Expires=1967597641&OSSAccessKeyId=LTAI5tGEHNoVu5tWHUWnosrs&Signature=%2BaGcHBT%2FHA3s%2BrZ687U50b4YE0A%3D'
          "
        />
        <div class="name">
          <nut-tag class="space-name" plain>{{ data.spaceName }}</nut-tag>
          {{ data.name }}
        </div>
      </div>
      <div v-if="isSwitcher" class="operation">
        开关状态
        <nut-switch
          v-model="getPowerstateValue"
          active-text="开"
          inactive-text="关"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import { reactive, toRefs, ref, computed } from "vue";
import httpService from "../services/httpService";

const switchs = ["switch", "SmartPlug", "fan", "light"];

export default {
  name: "device",
  props: {
    data: {
      type: Object,
    },
  },
  computed: {
    isSwitcher: function () {
      return switchs.findIndex((s) => s == this.data.category) >= 0;
    },
    getPowerstateValue: {
      get() {
        if (!this.data.property) {
          this.data.property = {
            powerstate: 0,
          };
        } else if (!this.data.property.powerstate) {
          this.data.property.powerstate = 0;
        }
        return this.data.property.powerstate == 1;
      },
      set(newVal) {
        let oldVal = this.data.property.powerstate;
        let val = newVal ? 1 : 0;
        this.data.property.powerstate = val;
        httpService
          .post("/device/" + this.data.deviceId + "/service/property/set", {
            data: { powerstate: val },
          })
          .then((res) => {
            if (res.statusCode != 200) {
              this.data.property.powerstate = oldVal;
            }
          });
      },
    },
  },
  components: {},
  setup() {
    function showDetail(deviceId) {
      Taro.navigateTo({
        url: "/pages/device/detail?deviceId=" + deviceId,
      });
    }

    return {
      showDetail,
    };
  },
};
</script>

<style lang="scss">
.device {
  max-width: 45vw;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.1);
  text-align: center;
  color: #333;
  .content {
    height: 130px;
    width: 100%;

    img {
      max-width: 70%;
      max-height: 60%;
    }
    .name {
      width: 100%;
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
      .space-name {
        font-size: 10px;
        line-height: 15px;
      }
    }
  }
  .operation {
    font-size: 12px;
    color: #999;
  }
}

.state {
  height: 10px;
  width: 100%;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  font-size: 8px;
  line-height: 10px;
  color: #fff;
  text-align: center;
}
.state.online {
  background-color: #0daf0170;
}
.state.offline {
  background-color: #98989870;
}
</style>
